<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style>
body {
  font-family: "Microsoft Yahei", Helvetica, arial, sans-serif ;
  font-size: 14px;
  line-height: 1.6;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: white;
  padding: 30px; 
color: #516272;}

body > *:first-child {
  margin-top: 0 !important; }
body > *:last-child {
  margin-bottom: 0 !important; }

a {
  color: #4183C4; }
a.absent {
  color: #cc0000; }
a.anchor {
  display: block;
  padding-left: 30px;
  margin-left: -30px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; }

h1, h2, h3, h4, h5, h6 {
	font-family: "Microsoft Yahei", Helvetica, arial, sans-serif ;
  margin: 20px 0 10px;
  padding: 0;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
  cursor: text;
  position: relative; }

h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor {
  background: url() no-repeat 10px center;
  text-decoration: none; }

h1 tt, h1 code {
  font-size: inherit; }

h2 tt, h2 code {
  font-size: inherit; }

h3 tt, h3 code {
  font-size: inherit; }

h4 tt, h4 code {
  font-size: inherit; }

h5 tt, h5 code {
  font-size: inherit; }

h6 tt, h6 code {
  font-size: inherit; }

h1 {
  font-size: 28px;
  color: #2B3F52; }

h2 {
  font-size: 24px;
  border-bottom: 1px solid #DDE4E9;
  color: #2B3F52; }

h3 {
  font-size: 18px;
  color: #2B3F52;  }

h4 {
  font-size: 16px;
  color: #2B3F52;  }

h5 {
  font-size: 14px;
  color: #2B3F52;  }

h6 {
  color: #2B3F52;
  font-size: 14px;
 }

p, blockquote, ul, ol, dl, li, table, pre {
	font-family: "Microsoft Yahei", Helvetica, arial, sans-serif ;
  margin: 15px 0;
  color: #516272;  }

hr {
  background: transparent url() repeat-x 0 0;
  border: 0 none;
  color: #cccccc;
  height: 4px;
  padding: 0;

}

body > h2:first-child {
  margin-top: 0;
  padding-top: 0; }
body > h1:first-child {
  margin-top: 0;
  padding-top: 0; }
  body > h1:first-child + h2 {
    margin-top: 0;
    padding-top: 0; }
body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child {
  margin-top: 0;
  padding-top: 0; }

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 {
  margin-top: 0;
  padding-top: 0; }

h1 p, h2 p, h3 p, h4 p, h5 p, h6 p {
  margin-top: 0; }

li p.first {
  display: inline-block; }
li {
  margin: 0; }
ul, ol {
  padding-left: 30px; }

ul :first-child, ol :first-child {
  margin-top: 0; }

dl {
  padding: 0; }
  dl dt {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    padding: 0;
    margin: 15px 0 5px; }
    dl dt:first-child {
      padding: 0; }
    dl dt > :first-child {
      margin-top: 0; }
    dl dt > :last-child {
      margin-bottom: 0; }
  dl dd {
    margin: 0 0 15px;
    padding: 0 15px; }
    dl dd > :first-child {
      margin-top: 0; }
    dl dd > :last-child {
      margin-bottom: 0; }

blockquote {
  border-left: 4px solid #ECF0F3;
  /*padding: 0 15px;*/
  padding: 15px;
  background-color:#F7F9FA;
  color: #2B3F52; }
  blockquote > :first-child {
    margin-top: 0; }
  blockquote > :last-child {
    margin-bottom: 0; }

table {
  padding: 0;border-collapse: collapse; }
  table tr {
    border-top: 1px solid #cccccc;
    background-color: white;
    margin: 0;
    padding: 0; }
    table tr:nth-child(2n) {
      background-color: #f8f8f8; }
    table tr th {
      font-weight: bold;
      border: 1px solid #cccccc;
      margin: 0;
      padding: 6px 13px; }
    table tr td {
      border: 1px solid #cccccc;
      margin: 0;
      padding: 6px 13px; }
    table tr th :first-child, table tr td :first-child {
      margin-top: 0; }
    table tr th :last-child, table tr td :last-child {
      margin-bottom: 0; }

img {
  max-width: 100%; }

span.frame {
  display: block;
  overflow: hidden; }
  span.frame > span {
    border: 1px solid #dddddd;
    display: block;
    float: left;
    overflow: hidden;
    margin: 13px 0 0;
    padding: 7px;
    width: auto; }
  span.frame span img {
    display: block;
    float: left; }
  span.frame span span {
    clear: both;
    color: #333333;
    display: block;
    padding: 5px 0 0; }
span.align-center {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-center > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: center; }
  span.align-center span img {
    margin: 0 auto;
    text-align: center; }
span.align-right {
  display: block;
  overflow: hidden;
  clear: both; }
  span.align-right > span {
    display: block;
    overflow: hidden;
    margin: 13px 0 0;
    text-align: right; }
  span.align-right span img {
    margin: 0;
    text-align: right; }
span.float-left {
  display: block;
  margin-right: 13px;
  overflow: hidden;
  float: left; }
  span.float-left span {
    margin: 13px 0 0; }
span.float-right {
  display: block;
  margin-left: 13px;
  overflow: hidden;
  float: right; }
  span.float-right > span {
    display: block;
    overflow: hidden;
    margin: 13px auto 0;
    text-align: right; }

code, tt {
  margin: 0 2px;
  padding: 0 5px;
  white-space: nowrap;
  border: 1px solid #eaeaea;
  background-color: #f8f8f8;
  border-radius: 3px; }

pre code {
  margin: 0;
  padding: 0;
  white-space: pre;
  border: none;
  background: transparent; }

.highlight pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }

pre {
  background-color: #f8f8f8;
  border: 1px solid #cccccc;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px; }
  pre code, pre tt {
    background-color: transparent;
    border: none; }

sup {
    font-size: 0.83em;
    vertical-align: super;
    line-height: 0;
}

code {
    white-space: pre-wrap;
    word-break: break-all;
    display: block;

}
* {
	-webkit-print-color-adjust: exact;
}
@media screen and (min-width: 914px) {
    body {
        width: 960px;
        margin:0 auto;
    }
}
@media print {
	table, pre {
		page-break-inside: avoid;
	}
	pre {
		word-wrap: break-word;
	}


}
</style>
<title>Markdown 语法和 MWeb 写作使用说明</title>

</head>
<body>
<h1>Markdown 语法和 MWeb 写作使用说明</h1>

<h2>Markdown 的设计哲学</h2>

<blockquote><p>Markdown 的目标是实现「易读易写」。
不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文件应该可以直接以纯文字发佈，并且看起来不会像是由许多标籤或是格式指令所构成。
Markdown 的语法有个主要的目的：用来作为一种网路内容的<em>写作</em>用语言。</p></blockquote>

<!-- more -->


<h2>本文约定</h2>

<p>如果有写 <code>效果如下：</code>， 在 MWeb 编辑状态下只有用 <code>CMD + R</code> 预览才可以看效果。</p>

<h2>标题</h2>

<p>Markdown 语法：</p>

<pre><code># 第一级标题 `&lt;h1&gt;` 
## 第二级标题 `&lt;h2&gt;` 
###### 第六级标题 `&lt;h6&gt;` 
</code></pre>

<p>效果如下：</p>

<h1>第一级标题 <code>&lt;h1&gt;</code></h1>

<h2>第二级标题 <code>&lt;h2&gt;</code></h2>

<h6>第六级标题 <code>&lt;h6&gt;</code></h6>

<h2>强调</h2>

<p>Markdown 语法：</p>

<pre><code>*这些文字会生成`&lt;em&gt;`*
_这些文字会生成`&lt;u&gt;`_

**这些文字会生成`&lt;strong&gt;`**
__这些文字会生成`&lt;strong&gt;`__
</code></pre>

<p>在 MWeb 中的快捷键为： <code>CMD + U</code>、<code>CMD + I</code>、<code>CMD + B</code>
效果如下：</p>

<p><em>这些文字会生成<code>&lt;em&gt;</code></em>
<em>这些文字会生成<code>&lt;u&gt;</code></em></p>

<p><strong>这些文字会生成<code>&lt;strong&gt;</code></strong>
<strong>这些文字会生成<code>&lt;strong&gt;</code></strong></p>

<h2>换行</h2>

<p>四个及以上空格加回车。
如果不想打这么多空格，只要回车就为换行，请勾选：<code>Preferences</code> - <code>Themes</code> - <code>Translate newlines to &lt;br&gt; tags</code></p>

<h2>列表</h2>

<h3>无序列表</h3>

<p>Markdown 语法：</p>

<pre><code>* 项目一 无序列表 `* + 空格键`
* 项目二
    * 项目二的子项目一 无序列表 `TAB + * + 空格键`
    * 项目二的子项目二
</code></pre>

<p>在 MWeb 中的快捷键为： <code>Option + U</code>
效果如下：</p>

<ul>
<li>项目一 无序列表 <code>* + 空格键</code></li>
<li>项目二

<ul>
<li>项目二的子项目一 无序列表 <code>TAB + * + 空格键</code></li>
<li>项目二的子项目二</li>
</ul>
</li>
</ul>


<h3>有序列表</h3>

<p>Markdown 语法：</p>

<pre><code>1. 项目一 有序列表 `数字 + . + 空格键`
2. 项目二 
3. 项目三
    1. 项目三的子项目一 有序列表 `TAB + 数字 + . + 空格键`
    2. 项目三的子项目二
</code></pre>

<p>效果如下：</p>

<ol>
<li>项目一 有序列表 <code>数字 + . + 空格键</code></li>
<li>项目二</li>
<li>项目三

<ol>
<li>项目三的子项目一 有序列表 <code>TAB + 数字 + . + 空格键</code></li>
<li>项目三的子项目二</li>
</ol>
</li>
</ol>


<h3>任务列表（Task lists）</h3>

<p>Markdown 语法：</p>

<pre><code>- [ ] 任务一 未做任务 `- + 空格 + [ ]`
- [x] 任务二 已做任务 `- + 空格 + [x]`
</code></pre>

<p>效果如下：</p>

<ul>
<li>[ ] 任务一 未做任务 <code>- + 空格 + [ ]</code></li>
<li>[x] 任务二 已做任务 <code>- + 空格 + [x]</code></li>
</ul>


<h2>图片</h2>

<p>Markdown 语法：</p>

<pre><code>![GitHub set up](http://zh.mweb.im/asset/img/set-up-git.gif)
格式: ![Alt Text](url)
</code></pre>

<p><code>Control + Shift + I</code> 可插入Markdown语法。
如果是 MWeb 的文档库中的文档，还可以用拖放图片、<code>CMD + V</code> 粘贴、<code>CMD + Option + I</code> 导入这三种方式来增加图片。
效果如下：</p>

<p><img src="http://zh.mweb.im/asset/img/set-up-git.gif" alt="GitHub set up" /></p>

<h2>链接</h2>

<p>Markdown 语法：</p>

<pre><code>email &lt;example@example.com&gt;
[GitHub](http://github.com)
自动生成连接  &lt;http://www.github.com/&gt;
</code></pre>

<p><code>Control + Shift + L</code> 可插入Markdown语法。
如果是 MWeb 的文档库中的文档，拖放或<code>CMD + Option + I</code> 导入非图片时，会生成连接。
效果如下：</p>

<p>Email 连接： <a href="&#109;&#97;&#x69;&#108;&#116;&#x6f;&#x3a;&#x65;&#x78;&#97;&#x6d;&#x70;&#108;&#101;&#64;&#x65;&#x78;&#97;&#x6d;&#112;&#108;&#101;&#x2e;&#99;&#x6f;&#x6d;">&#x65;&#x78;&#x61;&#x6d;&#112;&#x6c;&#101;&#64;&#101;&#120;&#x61;&#x6d;&#x70;&#108;&#x65;&#46;&#x63;&#x6f;&#x6d;</a>
<a href="http://github.com">连接标题Github网站</a>
自动生成连接像： <a href="http://www.github.com/">http://www.github.com/</a> 这样</p>

<h2>区块引用</h2>

<p>Markdown 语法：</p>

<pre><code>某某说:
&gt; 第一行引用
&gt; 第二行费用文字
</code></pre>

<p><code>CMD + Shift + B</code> 可插入Markdown语法。
效果如下：</p>

<p>某某说:</p>

<blockquote><p>第一行引用
第二行费用文字</p></blockquote>

<h2>行内代码</h2>

<p>Markdown 语法：</p>

<pre><code>像这样即可：`&lt;addr&gt;` `code`
</code></pre>

<p><code>CMD + K</code> 可插入Markdown语法。
效果如下：</p>

<p>像这样即可：<code>&lt;addr&gt;</code> <code>code</code></p>

<h2>多行或者一段代码</h2>

<p>Markdown 语法：</p>

<pre><code>```js
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }

}
```
</code></pre>

<p><code>CMD + Shift + K</code> 可插入Markdown语法。
效果如下：</p>

<p>```js
function fancyAlert(arg) {
    if(arg) {
        $.facebox({div:'#foo'})
    }</p>

<p>}
```</p>

<h2>顺序图或流程图</h2>

<p>Markdown 语法：</p>

<pre><code>```sequence
张三-&gt;李四: 嘿，小四儿, 写博客了没?
Note right of 李四: 李四愣了一下，说：
李四--&gt;张三: 忙得吐血，哪有时间写。
```

```flow
st=&gt;start: 开始
e=&gt;end: 结束
op=&gt;operation: 我的操作
cond=&gt;condition: 确认？

st-&gt;op-&gt;cond
cond(yes)-&gt;e
cond(no)-&gt;op
```
</code></pre>

<p>效果如下（ <code>Preferences</code> - <code>Themes</code> - <code>Enable sequence &amp; flow chart</code> 才会看到效果 ）：</p>

<p><code>sequence
张三-&gt;李四: 嘿，小四儿, 写博客了没?
Note right of 李四: 李四愣了一下，说：
李四--&gt;张三: 忙得吐血，哪有时间写。
</code></p>

<p>```flow
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？</p>

<p>st->op->cond
cond(yes)->e
cond(no)->op
```</p>

<p>更多请参考：<a href="http://bramp.github.io/js-sequence-diagrams/">http://bramp.github.io/js-sequence-diagrams/</a>, <a href="http://adrai.github.io/flowchart.js/">http://adrai.github.io/flowchart.js/</a></p>

<h2>表格</h2>

<p>Markdown 语法：</p>

<pre><code>第一格表头 | 第二格表头
--------- | -------------
内容单元格 第一列第一格 | 内容单元格第二列第一格
内容单元格 第一列第二格 多加文字 | 内容单元格第二列第二格
</code></pre>

<p>效果如下：</p>

<table>
<thead>
<tr>
<th>第一格表头 </th>
<th> 第二格表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容单元格 第一列第一格 </td>
<td> 内容单元格第二列第一格</td>
</tr>
<tr>
<td>内容单元格 第一列第二格 多加文字 </td>
<td> 内容单元格第二列第二格</td>
</tr>
</tbody>
</table>


<h2>删除线</h2>

<p>Markdown 语法：</p>

<pre><code>加删除线像这样用： ~~删除这些~~
</code></pre>

<p>效果如下：</p>

<p>加删除线像这样用： <del>删除这些</del></p>

<h2>分隔线</h2>

<p>以下三种方式都可以生成分隔线：</p>

<pre><code>***

*****

- - -
</code></pre>

<p>效果如下：</p>

<hr />

<hr />

<hr />

<h2>MathJax</h2>

<p>Markdown 语法：</p>

<pre><code>块级公式：
$$  x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

\\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } } \\]

行内公式： $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$
</code></pre>

<p>效果如下（<code>Preferences</code> - <code>Themes</code> - <code>Enable MathJax</code> 才会看到效果）：</p>

<p>块级公式：
$$  x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$</p>

<p>\[ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } } \]</p>

<p>行内公式： $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$</p>

<h2>脚注（Footnote）</h2>

<p>Markdown 语法：</p>

<pre><code>这是一个脚注：[^sample_footnote]
</code></pre>

<p>效果如下：</p>

<p>这是一个脚注：<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup></p>

<h2>注释和阅读更多</h2>

<!-- comment -->


<!-- more -->


<p>Actions->Insert Read More Comment <em>或者</em> <code>Command + .</code>
<strong>注</strong> 阅读更多的功能只用在生成网站或博客时。</p>

<h2>TOC</h2>

<p>Markdown 语法：</p>

<pre><code>[TOC]
</code></pre>

<p>效果如下：</p>

<p>[TOC]</p>
<div class="footnotes">
<hr/>
<ol>
<li id="fn:1">
<p>这里是脚注信息<a href="#fnref:1" rev="footnote">&#8617;</a></p></li>
</ol>
</div>

</body>
</html>
